<template>
	<view class="home">
		<!-- 自定义头部导航栏 -->
		<view v-if="isKeep"  class="header cY" :style="{
				 height:navHeight+'px',
		         paddingTop:marginTop+'px',
				backgroundColor:'#'+navigationBarColor,
				}">
				<!-- 搜索框 -->
		       <view class="cY search" :style="{
								 bottom:capsuleHeight+'px',
								}">
				  <view class="mr20" style="color: #FFFFFF;font-size: 38rpx;">微租机</view>
				<swiper-search width="130rpx" />
			  </view>
			<!-- <image class="receive" src="../../static/home/receive.png" mode="scaleToFill"
					@click="$onTo('/pages/collectCoupons/collectCoupons')"></image> -->
		</view>
		<view style="height: 180rpx;" :style="{backgroundColor:'#'+navigationBarColor,}">
		</view>
		<view class="banner  ">
			<view class="" :style="{background:'linear-gradient(to bottom,'+bgColor+',#ffffff)' }">
				<swiper v-if="isKeep" class="swiperbanner" @change="onBanner" :current="current" autoplay circular
					next-margin="-1">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<image lazy-load="true" :src="item.fileUrl" mode="scaleToFill" class="swiperbanner-item"
							@click="$onTo(item.link)"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- banner图附属文字提示 -->
			<view class="flow">
				<image class="flow-img" :src="item" mode="scaleToFill" v-for="(item, index) in flowImg" :key="index">
				</image>
			</view>
			<!--公告-->
			<view class="header-title">
				<uni-notice-bar :showClose="false" :scrollable="false" :showIcon="true" color="#23CCBF"
					background-color="#f7f7f7" single="true" text="禁止未成年和学生下单！"></uni-notice-bar>
			</view>
		</view>
		<!-- 产品专区分类 -->
		<view class="pt20 product">
			<view class="plr20  ">
				<view class="gridItem-box plr20 pt20 rd20">
					<view class="grb-list" v-for="(item, index) in productAreList" :key="index"
						@click="$onTo(item.link)">
						<view class="">
							<image :src="item.fileUrl?item.fileUrl:loading" class="category-img"
								style="width: 110rpx;height: 110rpx;">
							</image>
						</view>
						<view class="">
							<view class="grid-text">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 首月一元购活动 -->
			<view class="tc mt20" @click="enterMonisticActivity()">
				<image src="../../static/home/H2.png" mode="widthFix" style="width: 720rpx;">
						</image>
			</view>
			<view class="plr40 mt20 ">
				<!-- <view class="product-box plr20 pt10 pb40 rd20"> -->
				
				<view class="home-advertisement mt10 ">
					<!-- 广告位左边轮播图 -->
					<view class="home-advertisement-left pl5">
						<uni-swiper-dot :info="specialMain" :current="currentMain" mode="rounds" backgroundColor="#fff">
							<swiper class="home-advertisement-banner" @change="onChange" :current="currentMain" autoplay
								:interval="3000" circular>
								<swiper-item v-for="(item, index) in specialMain" :key="index">
									<image :src="item.fileUrl" mode="scaleToFill" class="home-advertisement-banner-item"
										@click="$onTo(item.link)">
									</image>
								</swiper-item>
							</swiper>
						</uni-swiper-dot>
					</view>
					<!-- 广告位右边轮播图 -->
					<view class="home-advertisement-right">
						<image class="home-advertisement-right-img" v-for="(item, index) in specialSub" :key="index"
							:src="item.fileUrl" mode="scaleToFill" @click="$onTo(item.link)">
						</image>
					</view>
				</view>
			</view>
		</view>
		<!-- 热租榜单 -->
		<view class="hotRentBox pt20">
			<view class="plr20">
				<view class="gridItem-box  ptb10 rd20">
					<view class="cX">
						<view class="cY">
							<image src="https://oss.microzuji.com/web/index/T5.png" mode="widthFix"
								style="width:120rpx;">
								<image class="ml10" src="https://oss.microzuji.com/web/index/Z1.png" mode="heightFix"
									style="height: 31rpx;">
									<view class="shu-line ml20 ">
									</view>
						</view>
						<!-- 热租榜单tab -->
						<view class="navwrap ml20">
							<scroll-view scroll-x="true" class="scrollNav">
								<view :class="hotTabCurrent === index ? 'act_scrollnav' : ''"
									@click="changeHotTab(index,item.id,item.jumpUrl)"
									v-for="(item, index) in hotRentTabList" class="scroll-view-item">
									{{ item.name }}
								</view>
							</scroll-view>
						</view>
						<!-- 更多 -->
						<!-- <image 
							@click="goMore()" class="moreImg" src="https://oss.microzuji.com/web/index/T7.png" mode="heightFix"
								style="height: 34rpx;"> -->
					</view>
					<!-- 热租榜单tab对应的产品 -->
					<view class="tab-box">
						<!-- 空数据 -->
						<view class="tab-Item" v-if="hotRentProducts.length===0" style="margin: 0 auto;">
							<view class="">
								<image src="../../static/home/empty.png" mode='heightFix' style="height: 240rpx;">
								</image>
								<view class="tc empty-tit">
									暂无数据~
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pt20" style="margin-top: -30rpx;">
			<view class="plr10">
				<scroll-view scroll-x="true">
					<view class="productZoneProductsList-box  ptb10 ">
						<view class="mt10 productZoneProductsList-Item" @click='skpGoodPage(item)'
							v-for="(item, index) in hotRentProducts" :key="index"
							>
							<view class="ptb10 tc productZoneProductsList-Img " style="position: relative;">
								<image :src="item.img" mode="scaleToFill" style="width: 34rpx;height: 34rpx;position: absolute;top: 0;left: 0rpx;">
								<view class="ml10"  style="width: 180rpx;height: 200rpx;">
									<image :src="item.image" :lazy-load="true" mode='scaleToFill' style="width: 126rpx;height: 148rpx;">
								</view>
								<view class="tabTit " style="margin-top: -40rpx;" >
									<view class="tab-title">{{item.name}}</view>
									<view class="tab-price mt10">{{item.price}}/天</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 全新苹果产品专区 -->
		<view>
			<view class="mt40" v-for="(tabItem,tabIndex) in productZoneTabList" :key="tabIndex">
				<!--产品专区大图 -->
				<view class="plr20">
					<view class="productZoneTab-box rd20" @click="goProduct(tabItem.jumpUrl)">
						<image :src="tabItem.pic" :lazy-load="true" mode='widthFix' style="width:100%;">
					</view>
				</view>
				<!-- 产品专区列表 -->
				<view class="pt20" style="margin-top: -40rpx;">
					<view class="plr10">
						<scroll-view scroll-x="true">
							<view class="productZoneProductsList-box  ptb10 ">
								<view class="mt10 productZoneProductsList-Item" @click="skpGoodPage(productItem)"
									v-for="(productItem, productIndex) in  productZoneProducts[tabItem.id].records"
									:key="productIndex">
									<view class="ptb10 tc productZoneProductsList-Img bY">
										<image :src="productItem.image" mode='scaleToFill' :lazy-load="true"
											style="width: 150rpx;height: 150rpx;">
										</image>
										<view class="tabTit fx1 mt10">
											<view class="proTitle">{{productItem.name}}</view>
											<view class="tab-price mt10">{{productItem.price}}/天</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="mt40">
			<view class="tc guessYouLike">
				<image src="https://oss.microzuji.com/web/index/Z2.png" mode="widthFix" style="width: 294rpx;">
				</image>
			</view>
			<!-- 猜你喜欢列表 -->
			<view class="pt20" style="margin-top: -20rpx;">
				<view class="plr20">
					<view class="guessLikeList-box  ptb10 ">
						<view class="mt10  guessLikeList-Item" @click="skpGoodPage(item)"
							v-for="(item, index) in guessYouLikeList" :key="index">
							<view class="ptb20 tc guessLikeList-Img">
								<image :src="item.image" :lazy-load="true" style="width: 200rpx;height: 200rpx;">
								</image>
							</view>
							<view class="guessLikeList-tit ptb20 ">
								<view class="bX pl10">
									<image src="https://oss.microzuji.com/web/index/T16.png" mode="scaleToFill"
										style="height: 34rpx;width: 66rpx;">
									</image>
									<view class="fx1 guess-tit ml10" style="margin-top: -5rpx;">{{item.name}}</view>
								</view>
								<view class="cY pl20" style="margin-top: -20rpx;">
									<view class="mt30 guess-price ">
										<text class="m">¥</text>
										<text class="l" style="font-weight: 800;">
											{{ getPartMoney(item.price && item.price.toString(), true) }}
										</text>
										<text class="d">.</text>
										<text class="r">
											{{ getPartMoney(item.price && item.price.toString(), false) }}
										</text>
										<text class="r">/天</text>
									</view>
									<view class="guess-tips ml10">非监管机 顺丰快递</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="home-bottom" v-if="pageNum * pageSize - total >= 10">
			<text style="text-align: center">没有更多啦，快去挑选商品吧～</text>
		</view>
	</view>
</template>
<script>
	import uniSwiperDot from "../../components/uni-swiper-dot/uni-swiper-dot.vue"
	import ProductItem from "../../components/productItem/productItem.vue"
	import XinjiuSlot from "../../components/productItem/slots/xinjiu.vue"
	import swiperSearch from "@/components/swiper-search/swiper-search.vue"
	import homeService from "./services"
	import {
		saveAdPubCode,
		getAdPubCode,
		returnChannelId
	} from "../../utils/index"
	import {
		indexComplexInfo,
		indexMayLikeProductPage,
	} from '../../api/index.js'
	export default {
		data() {
			return {
				navTop: 0,
				navHeight: 0,
				marginTop: 0,
				capsuleHeight: 0, //胶囊按钮与状态栏的下间距
				bgColor: '',
				navlist: [],
				hotTabCurrent: 0, //热租榜单tab的Current
				hotRentTabList: [], //热租榜单tab
				allHotRentProducts: [], //全部的热租榜单数据
				iconList: [{
						img: 'https://oss.microzuji.com/web/index/P1.png',
					},
					{
						img: 'https://oss.microzuji.com/web/index/P2.png',
					},
					{
						img: 'https://oss.microzuji.com/web/index/P3.png',
					}
				], //榜单前三名的logo
				hotRentProducts: [], //热租榜单tab对应的产品
				firstId: null, //热销榜单tab的第一个tabId
				jumpUrl: '', //热销榜单的更多跳转的地址
				productAreList: [], //专区分类的数据
				productZoneTabList: [], //产区列表对应的标题及大图数据
				productZoneProducts: [], //产区列表数据
				activeTab: 0, //标签下标
				guessYouLikeList: [],
				tabList: [], //标签数据
				bannerList: [], //banner图列表
				current: 0, //banner图下表
				total: 1, //标签商品共有多少条
				tabId: 108, //标签id
				pageNum: 1, //页数
				pageSize: 10, //一页多少条
				list: [], //商品列表
				tabCurrent: 0, //标签下标
				scrollLeft: 0, //标签左侧的位置
				pillsLeft: 0, // 胶囊距离左侧的位置
				lineLeft: 0, //标签滑块位置
				currentWidth: 0, // 当前选项的宽度
				containerWidth: 0, // 容器的宽度
				titleMain: "", //主标题
				titleSub: "", //副标题
				specialMain: [], //广告位左边轮播图列表
				currentMain: 0, //广告位左边轮播图列表下标
				specialSub: [], //广告位右边
				flowImg: [
					"../../static/home/banner_icon_1.png",
					"../../static/home/banner_icon_2.png",
					"../../static/home/banner_icon_3.png",
				], //图片信息
				adPubCode: '',
				categoryList: [], //分类列表
				navigationBarColor: "FFFFFF",
				isKeep: true,
			}
		},
		components: {
			uniSwiperDot,
			ProductItem,
			XinjiuSlot,
			swiperSearch,
		},
		watch: {
			tabCurrent: function(newVal, oldVal) {
				//监测标签下标变化，改变之后的值传入changeTab
				this.changeTab(newVal)
				//每次标签变化，需要计算标签的位置进行移动改变
				this.getTabItemWidth()
			},
		},
		onShow() {
			this.isKeep = true;
		},
		onHide() {
			this.isKeep = false;
		},
		onReady: function() {
			// 将头部的搜索框与右上角胶囊水平对齐
			let menuButtonObject = uni.getMenuButtonBoundingClientRect();
			uni.getSystemInfo({
				success: res => {
					let statusBarHeight = res.statusBarHeight,
						navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top -
							statusBarHeight) * 2; //导航高度
					this.navHeight = navHeight
					//console.log(this.navHeight, "导航栏高度")
					this.navTop = menuButtonObject.top //胶囊按钮与顶部的距离
					//console.log(this.navTop, "胶囊按钮与顶部的距离")
					this.marginTop = menuButtonObject.top - statusBarHeight
					//console.log(menuButtonObject.height, "胶囊按钮高度")
					this.capsuleHeight = this.navHeight - this.navTop - menuButtonObject.height
					// console.log(this.capsuleHeight, "胶囊按钮与状态栏的下间距")
				},
				fail(err) {
					console.log(err);
				}
			})
		},
		onLoad() {
			console.log('首页数据',999)
			// this.getNotice()
			// this.addAdPubCode(e);
			// this.getCategoryList();
			// this.indexComplexInfo()
			// this.indexMayLikeProductPage()
		},
		onPullDownRefresh() {
			this.pageNum = 1
			this.total = 1
			this.indexComplexInfo()
		},
		// 页面滚动到底部的事件
		onReachBottom() {
			this.onScrollToLower()
			
		},
		methods: {
			// * 获取金额的小数点前、后的数据
			// * @param {Boolean} isFront : 是否是前半部分
			getPartMoney(prices, isFront) {
				const price = prices || ""
				if (!price) return EMPTY_PLACEHOLDER
				const list = price.split(".")
				const result = isFront ? list[0] : list[1]
				return result || 0
			},
			indexComplexInfo() {
				indexComplexInfo({
					method: 'GET',
					data: {
						channelId: returnChannelId(),
						pageNum: 1,
						pageSize: 1000,
						tabId: 19
					}
				}).then(res => {
					if (res.statusCode === 200) {
						this.bannerList = res.data.bannerList
						this.titleMain = res.data.specialTitleMain
						this.titleSub = res.data.specialTitleSub
						this.specialMain = res.data.specialMain
						this.specialSub = res.data.specialSub
						this.productAreList = res.data.categoryList //专区分类的数据
						this.hotRentTabList = res.data.hotRentTabList //热租榜单的tab数据
						this.productZoneTabList = res.data.productZoneTabList //产区列表对应的标题及大图数据
						this.productZoneProducts = res.data.productZoneProducts
						this.firstId = res.data.hotRentTabList[0].id //热销榜单tab的第一个tabId
						this.allHotRentProducts = res.data.hotRentProducts.records //所有的热租产品数据
						// 刚进入页面时,默认选择第一个tab,根据firstId去过滤所有的热租产品数据,然后赋值给页面
						if (this.hotTabCurrent === 0 && this.hotRentTabList.length > 1) {
							let firstDataList = this.allHotRentProducts.filter(item => {
								return item.tabId === this.firstId
							})
							this.hotRentProducts = firstDataList
							if (this.hotRentProducts.length > 0) {
								this.hotRentProducts[0].img = this.iconList[0].img
								if (this.hotRentProducts.length > 1) {
									this.hotRentProducts[1].img = this.iconList[1].img
								}
								if (this.hotRentProducts.length > 2) {
									this.hotRentProducts[2].img = this.iconList[2].img
								}
							}
							uni.stopPullDownRefresh()
							this.onNavigationBarColor(0)
						}
					}
				})
			},
			// 点击切换热租榜单的tab
			changeHotTab(index, _id, jumpUrl) {
				this.tabId = _id
				this.changeTabData()
				this.hotTabCurrent = index;
			},
			changeTabData() {
				homeService
					.getIndexTabAndProductByPage({
						pageNum: 1,
						pageSize: 1000,
						// pageNum: this.pageNum,
						// pageSize: this.pageSize,
						tabId: this.tabId,
					})
					.then((res) => {
						this.hotRentProducts = res.products.records
						// console.log(this.hotRentProducts.length, "this.hotRentProducts ")
						if (this.hotRentProducts.length > 0) {
							this.hotRentProducts[0].img = this.iconList[0].img
							if (this.hotRentProducts.length > 1) {
								this.hotRentProducts[1].img = this.iconList[1].img
							}
							if (this.hotRentProducts.length > 2) {
								this.hotRentProducts[2].img = this.iconList[2].img
							}
						}
					})
			},
			// 点击产品大图,去对应的产品分类
			goProduct(url) {
				console.log('点击·了·', url)
				uni.navigateTo({
					url: url
				})
			},
			onItem(index) {
				this.current = index
			},
			onTab(i) {
				this.tabCurrent = i
			},
			//跳转商品页
			skpGoodPage(item) {
				wx.navigateTo({
					url:'/pages/product/product?productId'+item.itemId
				})
				// this.$onTo(
				// 	`/pages/product/product?productId=${
				// 			item.itemId}`
				// )
			},
			// 进入一元活动页面
			enterMonisticActivity(){
				wx.navigateTo({
					url:'/pages/monisticActivity/monisticActivity'
				})
			},
			changeTab(index) {
				//修改标签下标
				this.activeTab = index
				//修改标签下标
				this.tabId = this.tabList[index].id
				//当标签改变需要让商品页数和总条数重置
				this.pageNum = 0
				this.total = 1
			},
			// 当触底后,触发猜你喜欢接口
			onScrollToLower() {
				if(this.guessYouLikeList.length==0){
					indexMayLikeProductPage({
						method: 'GET',
						data: {
							pageNum: 1,
							pageSize: 10,
						}
					}).then(res => {
						if (res.statusCode === 200) {
							this.guessYouLikeList = this.guessYouLikeList.concat(res.data.products.records)
							this.total = res.data.products.total
						}
					})
				}
				else{
					//翻页功能每次下拉需要页数加一
					this.pageNum = this.pageNum + 1
					// 猜你喜欢分页数据
					indexMayLikeProductPage({
						method: 'GET',
						data: {
							pageNum: this.pageNum,
							pageSize: this.pageSize,
						}
					}).then(res => {
						if (res.statusCode === 200) {
							this.guessYouLikeList = this.guessYouLikeList.concat(res.data.products.records)
							this.total = res.data.products.total
						}
					})
				}
			},
			// 获取左移动位置
			getTabItemWidth() {
				let query = uni
					.createSelectorQuery()
					// #ifndef MP-ALIPAY
					.in(this)
				// #endif
				// 获取容器的宽度
				query
					.select("#tab_scroll")
					.boundingClientRect((data) => {
						if (!this.containerWidth && data) {
							this.containerWidth = data.width
						}
					})
					.exec()
				// 获取所有的 tab-item 的宽度
				query
					.selectAll(".tabs_container")
					.boundingClientRect((data) => {
						if (!data) {
							return
						}
						let lineLeft = 0
						let currentWidth = 0
						if (data) {
							for (let i = 0; i < data.length; i++) {
								if (i < this.tabCurrent) {
									lineLeft += data[i].width
								} else if (i == this.tabCurrent) {
									currentWidth = data[i].width
								} else {
									break
								}
							}
						}
						// 当前滑块的宽度
						this.currentWidth = currentWidth
						// 滑块作移动的位置
						this.lineLeft = lineLeft + currentWidth / 2
						// 胶囊距离左侧的位置
						this.pillsLeft = lineLeft
						// 计算滚动的距离左侧的位置
						this.scrollLeft = this.lineLeft - this.containerWidth / 4
					})
					.exec()
			},
			//获取广告位左边轮播图当前页数
			onChange(e) {
				this.currentMain = e.detail.current
			},
			//获取banner图当前页数
			onBanner(e) {
				this.current = e.detail.current
				this.onNavigationBarColor(this.current);
			},
			onNavigationBarColor(index) {
				this.bgColor = this.bannerList[index].describeInfo || "#028745";
				let color = this.bannerList[index].describeInfo || "#028745";
				this.navigationBarColor = color.substring(1, color.length);
				uni.setNavigationBarColor({
					backgroundColor: this.navigationBarColor,
				})
			},
			getNotice() {
				homeService.selectApiNotice().then((res) => {
					this.$setGlobalData("notice", res.data)
				})
			},
			addAdPubCode(e) {
				let options = my.getLaunchOptionsSync();
				if (options.hasOwnProperty("query")) {
					for (let key in options["query"]) {
						if (key == "adPubCode" && typeof(options["query"][key]) == "string" && options["query"][key]
							.length > 0) {
							// console.log("adPubCode7", key, options["query"][key]);
							// 推广广告ID
							this.adPubCode = options["query"][key]
							saveAdPubCode(this.adPubCode);
							// console.log("adPubCode2", getAdPubCode());
							homeService
								.addAddPubClick({
									deviceId: uni.getSystemInfoSync().deviceId,
									adPubCode: this.adPubCode,
								})
								.then((res) => {
									const resData = res && res.data
								})
						}
					}
				}
			},
			getCategoryList() {
				homeService.getCategoryList().then((res) => {
					//获取分类列表
					this.categoryList = res.data
				})
			}
		},
	}
</script>

<style>
	page {
		height: 100vh;
		width: 750rpx;
		background-color: #f7f7f7;
	}
</style>
<style scoped>
	.search {
		padding-left: 35rpx;
		height: 60rpx;
		position: absolute;
	}

	.navwrap {
		/* width: 310rpx; */
		width: 380rpx;
	}

	.scrollNav {
		white-space: nowrap;
	}

	.scroll-view-item {
		width: auto;
		display: inline-block;
		font-size: 27rpx;
		margin-right: 10rpx;
		padding: 20rpx 2rpx;
		position: relative;
		color: #A3A3A3;
		font-weight: 500;
	}

	.act_scrollnav {
		color: #1E1E1E;
		/* font-weight: bold; */
		font-weight: 500;
	}

	.act_scrollnav::after {
		content: '';
		display: block;
		width: 80%;
		height: 5rpx;
		background-color: #2FCCC3;
		border-radius: 2rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 4rpx;
	}

	.product {
		background-color: #f7f7f7;
		margin-top: -40rpx;
	}

	.hotRentBox {
		position: relative;
		background-color: #f7f7f7;
	}

	.moreImg {
		position: absolute;
		right: 0;
		top: 52rpx;
	}

	.shu-line {
		width: 4rpx;
		height: 34rpx;
		background: #979797;
		display: inline-block;
		margin-top: 1rpx;
		vertical-align: top;
	}

	.product-box {
		background-color: #EEEEEE;
	}

	.gridItem-box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 0rpx 0rpx #E6E6E6;
		/*下边阴影(h-shadow为0， v-shadow为正数为下边阴影)  黄色*/
	}
	.grb-list {
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.grid-text {
		font-size: 22rpx;
		margin-top: 10rpx;
		color: $u-type-info;
		margin-bottom: 25rpx;
	}
	.tab-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.tab-Item {
		width: 23%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		margin-left: 6rpx;
	}
	.productZoneProductsList-box {
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
	}
	.guessLikeList-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.productZoneProductsList-Item {
		width: 23%;
		margin-left: 12rpx;
	}
	.guessLikeList-Item {
		width: 49%;
	}
	.guessLikeList-Img {
		background-color: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
	}

	.guessLikeList-tit {
		background-color: #FFFFFF;
		border-radius: 0 0 20rpx 20rpx;
	}
	.guess-tit {
		line-height: 42rpx;
		font-size: 28rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		word-break: break-all;
	}
	.guess-price {
		font-size: 29rpx;
		color: #E72B02;
	}
	.m {
		font-size: 20rpx;
		margin-right: 6rpx;
	}
	.l {
		font-size: 38rpx;
		font-weight: 500;
	}
	.d {
		font-size: 36rpx;
	}
	.r {
		font-size: 20rpx;
		font-weight: 500;
	}
	.guess-tips {
		margin-top: 45rpx;
		font-size: 20rpx;
		color: #A1A1A1;
	}
	.productZoneProductsList-Img {
		background-color: #FFFFFF;
		border-radius: 15rpx;
	}
	.productZoneTab-Item {
		width: 24%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 10rpx;
		border-radius: 10rpx;
	}
	.tabTit {
		background-color: #FFFFFF;
		word-wrap: break-word;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.tab-title {
		color: #434343;
		line-height: 37rpx;
		width: 130rpx;
		font-size: 26rpx;
		font-weight: 400;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		word-break: break-all;
	}
	.proTitle {
		color: #434343;
		line-height: 37rpx;
		font-size: 20rpx;
		font-weight: 500;
		max-width: 130rpx;
		font-size: 26rpx;
		font-weight: 400;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		word-break: break-all;
	}
	.tab-price {
		text-align: center;
		font-size: 29rpx;
		color: #EA113D;
		font-weight: 900;
	}

	.empty-tit {
		font-size: 30rpx;
		font-weight: bold;
		color: #F1F1F1;
		margin-top: -40rpx;
	}
</style>
<style lang="scss" scoped>
	.home {
		width: 750rpx;

		.beijing {
			background-image: url("@/static/home/jianbian.png");
			background-repeat: no-repeat;
		}

		.header {
			position: fixed;
			width: 100%;
			left: 0;
			top: 0;
			background: #fff;
			z-index: 999;
			padding-left: 20rpx;

			.receive {
				width: 40rpx;
				height: 63rpx;
			}
		}
		.banner {
			.swiperbanner {
				height: 260rpx;
				border-radius: 16rpx;
				width: 710rpx;
				margin: 0 auto;

				.swiperbanner-item {
					height: 260rpx;
					border-radius: 16rpx;
					width: 100%;
				}
			}

			.flow {
				display: flex;
				justify-content: space-around;
				margin: 14rpx 0 20rpx 0;

				.flow-img {
					width: 117rpx;
					height: 23rpx;
				}
			}
		}

		.home-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;

			&-main {
				font-size: 42rpx;

				font-weight: 600;
				color: #000000;
			}

			&-vice {
				height: 33rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 33rpx;
				margin-left: 10rpx;
			}

			&-more {
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #999999;
				display: flex;
				align-items: center;
			}

			&-arrow {
				width: 12rpx;
				height: 18rpx;
				margin-left: 11rpx;
			}
		}

		.tabs {
			.tabs_sll {
				width: 711rpx;
				height: 100rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				margin: 20rpx auto;
				background-color: #ffffff;
			}

			.tabs_container {
				margin: 0 30rpx;
				display: flex;
				align-items: flex-end;
				color: #333333;
				position: relative;

				.tabs_container_iocn {
					@include cl();
					top: 15rpx;
				}
			}
		}

		.home-advertisement {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 20rpx;

			.home-advertisement-banner {
				width: 310rpx;
				height: 366rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
				// width: 260rpx;
				// height: 340rpx;

				&-item {
					width: 310rpx;
					height: 366rpx;
					// width: 260rpx;
					// height: 340rpx;
					border-radius: 20rpx;
				}
			}

			.home-advertisement-right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				// height: 3.4rem;
				height: 3.66rem;

				.home-advertisement-right-img {
					width: 380rpx;
					height: 174rpx;
					// width: 340rpx;
					// height: 164rpx;
					border-radius: 20rpx;
				}
			}
		}

		::-webkit-scrollbar {
			display: none;
		}

		.commodity {
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
		}

		.commodity_list {
			break-inside: avoid;
			width: 344rpx;
		}

		.home-bottom {
			text-align: center;
			margin: 20rpx 0;
		}

		.category-list {
			padding: 0 0.4rem;

			.category-item {
				break-inside: avoid;
				width: 1.02rem;
				height: 1.5rem;
				display: inline-block;
				margin-right: 0.4rem;
				margin-bottom: 0.2rem;

				.category-img {
					width: 1rem;
					height: 1rem;
					border-radius: 1rem;
				}

				.category-text {
					width: 1rem;
					height: 0.29rem;
					text-align: center;
					display: inline-block;
					overflow: hidden;
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					font-family: Arial;
					word-break: break-all;
				}
			}

			.category-item-right {
				margin-right: 0rem;
			}
		}
	}
</style>
